<!doctype html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<script src="../js/Width.js" type="text/javascript" charset="utf-8"></script>
		<link href="../css/mui.min.css" rel="stylesheet" />
		<link rel="stylesheet" type="text/css" href="../css/ReportMatter.css" />
      
		<style type="text/css">
			html,
			body {
				position: relative;
				height: 100%;
			}
		</style>
	</head>

	<body>
		<div id="matter">
			<header class="mui-bar mui-bar-nav">
				<a style="color: #fff;" class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
				<h1 class="mui-title" style="color: #fff;">报事</h1>
				<div class="save" @click="theMatterClick" >过往记录</div>
			</header>

			<div class="content">
				<!--<div class="header-location">
					<div class="locaticon">
						<div class="name"><span class="mui-icon mui-icon-map"></span>赛高国际</div>
						<div></div>
					</div>
				</div>-->
				<!--输入框-->
				<div class="mui-input-row padding15">
					<form>
					<textarea id="textarea" type="search" v-model="matterTxt" @focus="focusClick" @blur="blurClick" rows="5" placeholder="请说明一下您遇到的问题…"></textarea>
				    </form>
				</div>
				<!--上传图片-->
				<div class="img-wapper padding15 bottom-underline">
					<div class="preview" v-for="(item,index) in listImg" v-if="listImg.length > 0">
						<i class="delete" @click="deleteClick(index)"></i>
						<img :src="item" @click="getItemImgClick(index)">
					</div>
					<div class="button" @click="addImgClick"></div>
				</div>
				<!--录音-->
				<div class="record-wapper">
					<div class="record-item" v-for="(item,index) in recordList" @click="playAudio(item.entry)" :style="'width:'+ item.divWidth+'px'">
						<img class="record-icon" src="../images/wifi.png" />
						<div>{{item.num}}″</div>
					</div>
				</div>
			</div>
			<!--底部按钮-->
			<div class="bottom-wapper" v-show="bottomWapper">
				<div class="record">
					<div class="record-btn" id="record">
						<img src="../images/luyin.png" alt="" />
					</div>
					<div class="record-text">
						按住 说话
					</div>
				</div>
				<div class="bottom-submit" @click="submitClick">提交</div>
			</div>

			<div class="mrk-record" v-if="sate">
				<div class="record">
					<img class="record-img" src="../images/luyin-f.png" />
					
					<span v-if="record" class="record-span">录音中{{num}}s</span>
					<span v-else class="record-span">播放中</span>
				</div>
			</div>
		</div>
		<script src="../js/mui.min.js"></script>
		<script src="../js/vue.js"></script>
		<script src="../js/util.js"></script>
		<script src="../js/mui.zoom.js"></script>
		<script src="../js/mui.previewimage.js"></script>
		<script src="https://cdn.bootcss.com/fastclick/1.0.6/fastclick.min.js"></script>
		<script type="text/javascript">
			mui.init({
				gestureConfig: {
					tap: true, //默认为true
					doubletap: true, //默认为false
					longtap: false, //默认为false
					swipe: true, //默认为true
					drag: true, //默认为true
					hold: true, //默认为false，不监听
					release: true //默认为false，不监听
				}
			})

			var Record = null
			var timer = null
			var ti = 0;

			mui.plusReady(function() {
				FastClick.attach(document.body);
				Record = plus.audio.getRecorder();
				mui('#record')[0].addEventListener("hold", function() {
					matter.record = true
					matter.sate = true
					openRecord()
					ti = 0;
					timer = setInterval(function() {
						matter.num++
							if(matter.num === 60) {
								clearInterval(timer); // 停止时间
								Record.stop(); // 结束计时
								matter.sate = false // 关闭语音窗体
							}
					}, 1000);
				});

				mui('#record')[0].addEventListener("release", function() {
					matter.sate = false
					matter.record = false
					Record.stop();
					
				});
			})
            
            
			function openRecord() {
				Record.record({
					filename: "_doc/audio/"
				}, function(res) {
					plus.io.resolveLocalFileSystemURL(res, function(entry) {
						var recordData = {} // 定义一个空对象
						clearInterval(timer); // 停止时间
						timer = null
						if(matter.num > 1) {
							recordData.divWidth = matter.num * (htmlWidth / 30) + 30
							recordData.num = matter.num //将计时结束后的数字放在 recorData 对象里
							recordData.entry = entry //将录音返回的文件路径在 recorData 对象里
							recordData.Url = res
							console.log(res)
							matter.recordList.push(recordData) // 将 recorData 对象 push到 vue 对象matter里的recordList数组里。
						} else {
							mui.toast('录音太短！')
						}
						matter.num = 0
					}, function(e) {
						outLine('读取录音文件错误：' + e.message);
					});
				}, function(e) {
					alert('发生了错误!' + e.message)
				})

			}

			var p = null

			function startPlay(url) {
				p = plus.audio.createPlayer(url);
				p.play(function() {
					matter.sate = false;
					mui.toast('播放完成！');
					// 播放完成
				}, function(e) {
					mui.alert('播放音频文件"' + url + '"失败：' + e.message);
				});
			}

			var matter = new Vue({
				el: "#matter",
				data: {
					num: 0,
					sate: false,
					bottomWapper: true,
			        record: false,
					matterTxt: '',
					recordList: [],
					listImg: []
				},
				methods: {
					theMatterClick: function () {
						mui.openWindow({
							url: 'orderDetails/TheMatter.html',
							id: 'orderDetails/theMatter.html',
							waiting: {
								autoShow: false
							}
						})
					},
					addImgClick: function() {
						var that = this
						// 从相册中选择图片
						mui.toast('最多选择5张');
						plus.gallery.pick(function(e) {
							var lfs = e.files;
							that.listImg = e.files
						}, function(e) {
							mui.toast('取消选择图片');
						}, {
							filter: 'image',
							multiple: true,
							maximum: 5,
							system: false,
							onmaxed: function() {
								plus.nativeUI.alert('最多只能选择5张图片');
							}
						});
					},
					deleteClick: function(num) {
						console.log(num)
						this.listImg.splice(num, 1)
					},

					playAudio: function(text) {
						if(!text) {
							mui.toast('无效的音频文件');
							return;
						}
						this.sate = true;
						console.log(text.name)
						startPlay('_doc/audio/' + text.name);
					},

					focusClick: function() {
						this.bottomWapper = false
					},

					blurClick: function() {
						this.bottomWapper = true
					},

					getItemImgClick: function(num) {
						var listImg = this.listImg
						console.log(num)
						plus.nativeUI.previewImage(listImg, {
							current: num
						})
					},
					submitClick: function() { // 提交方法
						var that = this
					    if(!that.matterTxt){
					    	mui.toast('请输入内容')
					    	return
					    }
						plus.nativeUI.confirm("您确定要提交吗？", function(e) {
							if(e.index == 0) {
								that.postReport() // 提交文本
							}
					    })		
					},
					
					postFileReptImg: function(reptID) { //提交图片
						var that = this
						console.log('执行', reptID)
						var server = httpUrl.testUrl+'/api/ReportThing/ReptImg';
						var imgList = that.listImg;
						console.log(imgList)
						var wt = plus.nativeUI.showWaiting();
						var task = plus.uploader.createUpload(server, {
								method: "POST"
							},
							function(t, status) { //上传完成
								if(status == 200) {
									wt.close(); //关闭等待提示按钮
								} else {
									alert("上传失败：" + status);
									wt.close(); //关闭等待提示按钮
								}
							}
						);
						//添加其他参数
						task.addData("reptID", reptID);
						imgList.forEach(function(item,num){
							task.addFile(item,{key:item});
						})
						task.start();
					},
					
					postFileReptVoice: function(reptID) { //提交录音方法
						var that = this
						console.log('执行', reptID)
						var server = httpUrl.testUrl+'/api/ReportThing/ReptVoice';
						var recordList = that.recordList;
						console.log(recordList)
						var wt = plus.nativeUI.showWaiting();
						var task = plus.uploader.createUpload(server, {
								method: "POST"
							},
							function(t, status) { //上传完成
								if(status == 200) {
									wt.close(); //关闭等待提示按钮
								} else {
									alert("上传失败：" + status);
									wt.close(); //关闭等待提示按钮
								}
							}
						);
						//添加其他参数
						task.addData("reptID", reptID);
						recordList.forEach(function(item,num){
							console.log(item.Url)
							task.addFile(item.Url,{key:item.Url});
						})
						task.start();
					},
					
					postReport: function() { //提交文本
						var that = this
						mui.post(httpUrl.testUrl + '/api/ReportThing/ReportThing', {
							userID: plus.storage.getItem("userID"),
							reptDetails: that.matterTxt ? that.matterTxt : '暂无内容'
						}, function(res) {
							if(res.code === 1001) {
								if(that.listImg.length > 0) {
									that.postFileReptImg(res.data) //提交图片方法
								} 
								if(that.recordList.length > 0) {
									that.postFileReptVoice(res.data) //提交录音方法
								}
								mui.alert('报事提交成功！',function(){
									mui.back()
								})
							} else {
								mui.alert('调用上传报事文本接口出现失败', res)
							}
						})
					},

				}
			})
		</script>
	</body>

</html>